<script lang="ts" setup>
import { Snackbar } from '@varlet/ui'
import router from '../../router'
const goBack = () => {
    router.push('/wode')
  Snackbar({
    // content: '返回',
    position: 'top'
  })
};
</script>
<template>
<var-app-bar title="我的津贴" title-position="center" text-color="black" color="#fed35d" style="font-weight: bold;">
    <template #left>
        <var-button
            round
            text
            color="transparent"
            text-color="black"
            @click="goBack"
        >
            <var-icon name="chevron-left" :size="24" />
        </var-button>
    </template>
</var-app-bar>
<div style="position: relative;">
    <div style="background:#fed35d;padding:10px;height:90px;">
      <p><span style="font-size:18px;margin-left:10px;font-weight: bold;">已为您节省</span><span style="font-size:18px;color: red;margin-left:5px">￥16.5</span><var-icon name="chevron-right" style="float:right;" /></p>
    </div>
    <div style="background:#fff;padding:10px;position: absolute;top: 50px;left: 10px; right: 10px;border-radius: 5px;height:90px;">
      <div style="border-bottom:1px solid #a5a5a1;height: 60px;">
        <p style="float:left;">
          <span style="font-size:20px;font-weight: bold;float:left;">津贴余额￥20</span><br>
          <span style="margin-top:5px;color:#a5a5a1;font-size: 14px;float:left;">有效期至2022.06.16</span>
        </p>
          <var-button style="border-radius:30px;float:right;font-weight: bold;margin-top: 10px;" color="#ffc236" size="small">去使用</var-button>
      </div>
        <span style="float:left;font-size: 12px;color: #c2c2bf;margin-top: 10px;">津贴可与减满、折扣商品、红包叠加使用</span>
        <var-button text text-color="#c2c2bf" size="mini" style="border:1px solid #c2c2bf;float:right;margin-top: 10px;">使用规则</var-button>
    </div>
    <div style="background:#f3f3f3;padding: 60px 0 100px 0;border-radius: 10px;margin-top: -10px;">
      <!-- <div style="background:#fff;margin:10px;padding:10px;border-radius: 10px;" v-for="item in 5">
        <div style="width:20%;border:1px solid pink;">
          <img src="https://img0.baidu.com/it/u=3547270146,831455294&fm=253&fmt=auto&app=138&f=PNG?w=980&h=500" alt="" style="width:100%;height:20%;">
        </div>
        <div style="border:1px solid blue;width:70%;float:right;"></div>
      </div> -->
    </div>
</div>
</template>
<style lang="scss" scoped>
.var-elevation--3{
  box-shadow: none !important;
}
</style>